<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org">

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		
		<style>
			

			
			#image {
				margin: 0 auto;
				padding: 10px;
				width: 95%;
				border: 1px salmon solid;
				/*开启弹性布局*/
				display: flex;
				/*wrap：换行，第一行在上方。*/
				flex-wrap: wrap;
				/*   居中 */
				justify-content:space-around;
				/*或者使用 两端对齐，项目之间的间隔都相等。*/
				/* justify-content: space-between; */
				
				box-shadow: 1px 1px 5px silver;
				border-radius: 10px;

				
			}

			.album {
				width: 250px;
				height: 250px;
				box-shadow: 1px 1px 5px silver;
				border-radius: 10px;
				animation: key1 3s infinite forwards alternate;
			}

			@keyframes key1 {
				0% {}

				20% {
					transform: translate(0px, -13px);

				}

				40% {
					transform: translate(0px, 15px);

				}

				100% {
					transform: translate(0px, 0px);

				}
			}


			.album:hover {

				animation: key 0.5s;

			}

			@keyframes key {
				0% {}

				100% {
					transform: scale(1.2);

				}
			}


			.p1 {
				animation: key 4s infinite forwards alternate;
				font-size: 18px;
				font-weight: bold;
				color: salmon;
				box-shadow: 1px 1px 5px silver;
				border-radius: 10px;
				
				width: 150px;
				border: 1px salmon solid;
				margin-top: 10px;
				margin-bottom: 15px;
				
				
			}

			.div1 {
				margin: 15px;

			}

			.button1 {

				width: 100px;
				height: 40px;
				background-color: #FA8072;
				border: 1px sandybrown solid;
				box-shadow: 1px 1px 5px silver;
				border-radius: 10px;
			}

			.button1:hover {
				transform: scale(1.2);
				transition: all 0.5s ease-in-out;
				background-color: antiquewhite;
				cursor: pointer;
			}



			* {
				margin: 0;
				padding: 0;
			}

			.bg {
				background-color: #f4f5f9;
				width: 100px;
				border: 1px solid darkgray;
				display: none;
				position: absolute;
				box-shadow: 2px 2px 8px 1px rgba(0, 0, 0, .2);
				z-index: 1000;

			}

			.bg ul {
				list-style-type: none;
				text-align: center;
				line-height: 40px;
			}

			.bg li:hover {
				cursor: pointer;

				background: #eee;
				color: #CC1A1A;
			}


			.addClass1 {

				background-image: url("/images/2.gif");
				/*防止图片没加载出来 使用颜色代替*/

				/*适配图片大小*/
				/* background-size:cover; */
				/*背景图显示方式*/
				background-repeat: no-repeat;
				/*图像定位*/
				background-position: center;
				width: 500px;
				height: 500px;
				display: block;
				background-size:cover;
				border-radius: 20px;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);


			}


		</style>


	</head>
	<body>
	<div id="load_background"></div>

		<div align="center" id="container">
			<div id="container1">
			<div class="bg" id="bg">
				<ul>
					<li>进入相册</li>
					<li>删 除</li>
					<li>修 改</li>
					<li>****</li>
				</ul>
			</div>


			<h1 align="center">相册</h1>
			<div id="image" align="center">

				
			</div>

			<button class="button1" id="button1">添加新相册</button>
			</div>
		</div>



	<script th:src="@{/js/jquery-3.4.1.js}" type="text/javascript"></script>

	<!-- 图片的延迟加载 -->
	<script th:src="@{/js/lazyload.js}" type="text/javascript"></script>
		<script>


			var id; //图片id
			//获取鼠标点击标签 获取标签名称的三种方法
			$(document).click(function(e) {
				console.clear()
				var v_id1 = $(e.target).prop("tagName");
				if(v_id1!="IMG"){
					id=0;
					$( div).hide()
				}

			})

			$(function() {
				$("#container").addClass("addClass1");
				$("#container1").hide()
				$.get("/album", {}, function(data) {
						console.log(data)



					if (data.data==null){
						return false;
					}
					$.each(data.data, function(index, obj) {

						console.log(obj)

						var str = "<div class='div1'> \
								<p class='p1'>" + obj.title + "</p> \
								<img data-original=" +
							obj.image +
							" title='"+ obj.imageDescribe + "'id=" + obj["id"] +
							" class='album lazy' /> \
								</div>"

						$("#image").append(str)

					})
					$("#container").removeClass("addClass1");
					$("#container1").show()


					// 获取鼠标左键单击元素的id

					$("#image .div1").click(function(){
						console.clear()
						var	c=$(this).index();
						console.log("__"+c)
						 id=$(".album").eq(c).attr("id")
					})

					
					// 启动  延迟加载
					$("img.lazy").lazyload({
						placeholder: "./1.gif", //用图片提前占位
						// placeholder,值为某一图片路径.此图片用来占据将要加载的图片的位置,待图片加载时,占位图则会隐藏
						effect: "fadeIn", // 载入使用何种效果
						// effect(特效),值有show(直接显示),fadeIn(淡入),slideDown(下拉)等,常用fadeIn
						threshold: 200, // 提前开始加载
						// threshold,值为数字,代表页面高度.如设置为200,表示滚动条在离目标位置还有200的高度时就开始加载图片,可以做到不让用户察觉
						container: $("#container"), // 对某容器中的图片实现效果  就是最外层的div 设置id 为 container就行了 
						// container,值为某容器.lazyload默认在拉动浏览器滚动条时生效,这个参数可以让你在拉动某DIV的滚动条时依次加载其中的图片
						failurelimit: 10 // 图片排序混乱时
						// failurelimit,值为数字.lazyload默认在找到第一张不在可见区域里的图片时则不再继续加载,但当HTML容器混乱的时候可能出现可见区域内图片并没加载出来的情况,failurelimit意在加载N张可见区域外的图片,以避免出现这个问题.
					}).removeClass("lazy");
					


				}, "json")

					$("#button1").click(function() {

					location.href = "/image_album_add.html";

				})





			})





			var div = document.getElementById('bg');

			var youj = $("#image"); // 右键菜单显示在  指定元素里
			var youj_ = document.getElementById('image'); // 右键菜单显示在  指定元素里


			var winWidth = winWidth = youj_.scrollWidth;
			var winHeight = winHeight = youj_.scrollHeight;


			var okjinru=true;
			var mouseX;
			var mouseY;

			//  显示菜单

			//右键显示菜单    oncontextmenu

			// 我们采用 左键显示菜单  考录到手机用户没有右键的问题
			document.onclick = function(e) {


				if(okjinru&&id!==0){
					$( div).show();
				var e = e || window.event;
				e.preventDefault(); //取消右键菜单的默认行为

				// 获取鼠标坐标
				mouseX = e.clientX; //获取鼠标所在的 x轴
				mouseY = e.clientY; //获取鼠标所在的 y轴

				var pd = true;

				var left_ = (youj_.offsetWidth + youj.offset().left)

				// 判断右边界值，防止菜单栏溢出可视窗口
				if (mouseX >= left_) {
					// mouseX = left_ - $(div).width();
					console.log("pd X ")
					pd = false;

				}
				// 判断左边界值，防止菜单栏溢出可视窗口

				var left = youj.offset().left
				if (mouseX < left) {
					// mouseX = left;
					console.log("pd X1 ")
					pd = false;
				}


				var wh_ = (youj_.offsetHeight + youj.offset().top)
				// 判断下边界 
				if (mouseY >= wh_) {
					// mouseY = wh_ - $(div).height() / 2
					console.log("pd Y ")
					pd = false;
				}


				// 判断上边界 
				var top = youj.offset().top
				if (mouseY < top) {
					// mouseY = top
					console.log("pd Y 1")
					pd = false;
				}


				if (pd) {
					
					var x=mouseX+$(window).scrollLeft()+$(div).width()
					if(x>=left_){
						div.style.left = left_ - $(div).width()+10 + 'px';
					}else{
						div.style.left = mouseX + $(window).scrollLeft()+10 +'px';
					}
					
					var y=mouseY+$(window).scrollTop()+$(div).height()
					if(y>=wh_){
						div.style.top = wh_-$(div).height()+15 + 'px';
					}else{
						div.style.top = mouseY+$(window).scrollTop()+15 + 'px';
					}
					
					
					div.style.display = 'block';
				} else {
					div.style.display = 'none';
				}


				}
				
				console.log(id)

			}




	

			//显示菜单  后 左键
			div.addEventListener('click', function(e) {

				if(id==0){
					
					return false;
				}
				
				XY();
				var e = e || window.event; //获取鼠标左键点击的值
				console.log(e.target.innerText)

				if (e.target.innerText === "修 改" && id !== "") {
					okjinru=false;
					$( div).hide()
					console.log("修改" + id)

					location.href = "/image_album_up.html?id=" + id;

					id = "";
				}
				if (e.target.innerText === "删 除" && id !== "") {
					$( div).hide()
					console.log("删除" + id)
					if(!confirm("是否确认删除")){
						return false;
					}
					
					var imag=$("#"+id).attr("data-original")
					
					
					$.ajax({  
					    url:"/album/albunDe/"+id,
					    type:"DELETE",  
					    dataType:"json",  
					    data:{"path":imag},  
					    headers: {'Content-Type': 'application/json'},
						async:false,   //不开启异步  这样在ajax内 就可以和获取全局的变量
					    success: function (data) {    
					  	console.log(data);
					        if (data.flag === true) {
								$("#"+id).hide();
								$("#"+id).prev().hide();

					        }
					    }, 
						error:function(response){
					        console.log(response);
					    }
					})    
					
					
			

					id = "";
				}


				if (e.target.innerText === "进入相册" && id !== "") {
					okjinru=false;
					$( div).hide()

					console.log("进入相册" + id)
					location.href = "/image_son.html?id=" + id
				
					id = "";
				}
			})

			//防止  当在作用区域点击右键 后 未进行操作   之后 在其他空白区域右键 进行操作 造成的误操作
			function XY() {
				var w = youj_.scrollWidth;
				var h = youj_.scrollHeight;
				var X = youj.offset().left;
				var Y = youj.offset().top;
				if (mouseX >= (X + w) || mouseX <= X) {
					id = "";
					alert("你选择有效的 行");
				} else if (mouseY >= (Y + h) || mouseY <= Y) {
					id = "";
					alert("你选择有效的 行")
				}
			}


			//屏蔽右键菜单

			document.oncontextmenu = function(event) {

				if (window.event) {

					event = window.event;

				}


				try {

					var the = event.srcElement;

					if (!((the.tagName == "INPUT" && the.type.toLowerCase() == "text") || the.tagName == "TEXTAREA")) {

						return false;

					}

					return true;


				} catch (e) {

					return false;

				}

			}

		</script>

	</body>
</html>
